<template>
  <h2>vue + ts</h2>
  <button>-</button>
  <span>{{ count }}</span>
  <button @click="add(2)">+2</button>
  <button @click="add(3)">+3</button>

  <p>doubleCount: {{ doubleCount }}</p>

  <hr />

  <Child :count="count" />
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
import Child from "./Child.vue";

const count = ref<number>(5);

const add = (n: number): void => {
  count.value += n;
};

const doubleCount = computed<number>(() => {
  return count.value * 2;
});

watch(count, (): void => {
  console.log("count改变了");
});

onMounted(() => {
  console.log("组件初始化了");
});
</script>
